<template>
    <div>
        <div class="loading" v-show="isOpen">
            <div >
                <div style="width: 34px;height: 34px">
                    <img src="../../../static/images/loading.gif" alt="" style="width: 100%">
                </div>
                <div>{{ $t("lab_loading") }}</div><!--加载中...-->
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'commonLoading',
    props: {
        isLoading: Boolean
    },
    data() {
        return {
            isOpen: false,
            lazy: Object
        };
    },
    mounted() {
        setTimeout(() => {
            this.isOpen = this.isLoading;
        }, 500);
    },
    watch: {
        isLoading() {
            clearTimeout(this.lazy);
            if (this.isLoading) {
                this.lazy = setTimeout(() => {
                    this.isOpen = this.isLoading;
                }, 500);
            } else {
                this.isOpen = this.isLoading;
            }
        }
    }
};
</script>

<style scoped lang="less">
    .loading{
        position: fixed;
        width: 100%;
        /*height: 100%;*/
        z-index: 999;
        /* background: #ffffff;*/
        &>div{
            width: 118px;
            height: 118px;
            background: rgba(0,0,0,.5);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            border-radius: 16px;
            &>div:first-child{
                margin-bottom: 10px;
            }
        }
    }
</style>
